<template>
  <div id="merchant_brand" class="app-container" align="center">
    <el-form ref="row_data" :model="row_data" :rules="rules" label-position="right" align="left" label-width="130px" style="width: 60%;">
      <el-form-item align="right" style="margin-top: 30px">
        <el-button v-if="row_data.status === 1" :disabled="isDisable1" type="primary">等待审核</el-button>
        <el-button v-else-if="row_data.status === 2" :disabled="isDisable" type="primary" @click="submitForm()">修改品牌</el-button>
        <el-button v-else-if="row_data.status === 3" :disabled="isDisable" type="primary" @click="submitForm()">重新提交</el-button>
        <el-button v-else :disabled="isDisable" type="primary" @click="submitForm()">提交品牌</el-button>
      </el-form-item>
      <el-tabs v-model="activeName" type="border-card" stretch @tab-click="handleClick">
        <!-- 基本信息 -->
        <el-tab-pane label="基本信息" name="first">
          <el-form-item :label="'品牌名称:'" prop="brand_name">
            <el-input v-model="row_data.brand_name" placeholder="请输入品牌名称" style="width: 80%;"/>
          </el-form-item>
          <el-form-item :label="'公司名称:'" prop="company_name">
            <el-input v-model="row_data.company_name" placeholder="请输入公司名称" style="width: 80%;"/>
          </el-form-item>
          <el-form-item :label="'办公地址:'" prop="business_address">
            <el-input v-model="row_data.business_address" placeholder="请输入办公地址" style="width: 80%;"/>
          </el-form-item>
          <el-form-item :label="'联系人:'" prop="real_name">
            <el-input v-model="row_data.real_name" placeholder="请输入联系人名称" style="width: 80%;"/>
          </el-form-item>
          <el-form-item :label="'联系电话:'" prop="mobile_no">
            <el-input v-model="row_data.mobile_no" placeholder="请输入手机号码" style="width: 80%;"/>
          </el-form-item>
          <el-form-item :label="'注册时间:'" prop="regtime">
            <el-date-picker
              v-model="row_data.regtime"
              type="date"
              placeholder="请选择注册时间" />
          </el-form-item>
          <el-form-item :label="'审核状态:'" prop="status">
            <span v-if="row_data.status === 1">未审核</span>
            <span v-else-if="row_data.status === 2">同意</span>
            <span v-else-if="row_data.status === 3">拒绝</span>
            <span v-else>暂无品牌</span>
          </el-form-item>
          <el-form-item :label="'基本信息:'" prop="basic_info">
            <el-input :autosize="{ minRows: 6, maxRows: 20}" v-model="row_data.basic_info" type="textarea" style="width: 90%;height: 70%" placeholder="请输入基本信息" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="证件上传" name="two">
          <el-form-item :label="'品牌图片'" prop="brand_image">
            <!--<el-alert title="建议图片尺寸为 宽 px 高 px" style="margin-bottom: 10px; line-height: 20px" type="success"/>-->
            <div class="upload_product_main_photo">
              <el-alert
                title="建议图片像素（750px * 750px）"
                type="warning"
                show-icon
                style="margin-bottom: 10px; line-height: 20px; width: 280px"
                close-text="知道了"/>
              <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="upload_product_main_photo" class="avatar-uploader" action="">
                <img v-if="row_data.brand_image" :src="row_data.brand_image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item :label="'营业执照'" prop="business_license">
            <!--<el-alert title="建议图片尺寸为 宽 x 高 px" style="margin-bottom: 10px; line-height: 20px" type="success"/>-->
            <div class="upload_product_main_photo">
              <el-alert
                title="建议图片像素（750px * 750px）"
                type="warning"
                show-icon
                style="margin-bottom: 10px; line-height: 20px; width: 280px"
                close-text="知道了"/>
              <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="upload_business_license" class="avatar-uploader" action="">
                <img v-if="row_data.business_license" :src="row_data.business_license" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item :label="'身份证正面照'" prop="id_card_front">
            <!--<el-alert title="建议图片尺寸为 宽 x 高 px" style="margin-bottom: 10px; line-height: 20px" type="success"/>-->
            <div class="upload_product_main_photo">
              <el-alert
                title="建议图片像素（750px * 750px）"
                type="warning"
                show-icon
                style="margin-bottom: 10px; line-height: 20px; width: 280px"
                close-text="知道了"/>
              <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="upload_id_card_zm" class="avatar-uploader" action="">
                <img v-if="row_data.id_card_front" :src="row_data.id_card_front" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item :label="'身份证反面照'" prop="reverse_of_id_card">
            <!--<el-alert title="建议图片尺寸为 宽 x 高 px" style="margin-bottom: 10px; line-height: 20px" type="success"/>-->
            <div class="upload_product_main_photo">
              <el-alert
                title="建议图片像素（750px * 750px）"
                type="warning"
                show-icon
                style="margin-bottom: 10px; line-height: 20px; width: 280px"
                close-text="知道了"/>
              <el-upload :show-file-list="false" :before-upload="beforeAvatarUpload" :http-request="upload_id_card_fm" class="avatar-uploader" action="">
                <img v-if="row_data.reverse_of_id_card" :src="row_data.reverse_of_id_card" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </div>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="品牌简介" name="third" style="float: left;width: 98%;height: 80%;">
          <el-form-item label="品牌简介" prop="intro" align="left">
            <tinymce v-model="row_data.intro"/>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { info, add } from '@/api/merchant_brand/merchant_brand'
import store from '@/store'
import { client } from '@/utils/alioss'
import Tinymce from '@/components/Tinymce'

export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog },
  components: { Tinymce },
  data() {
    return {
      rules: {
        business_license: [
          { type: 'url', required: true, message: '营业证照地址不正确', trigger: 'blur' },
          { required: true, message: '营业证照不能为空', trigger: 'blur' }
        ],
        brand_name: [
          { required: true, message: '品牌名称不能为空', trigger: 'blur' }
        ],
        real_name: [
          { required: true, message: '真实名称不能为空', trigger: 'blur' }
        ],
        brand_image: [
          { type: 'url', required: true, message: '品牌图片地址不正确', trigger: 'blur' }
        ],
        mobile_no: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' }
        ],
        id_card_front: [
          { type: 'url', required: true, message: '身份证正面照地址不正确', trigger: 'blur' },
          { required: true, message: '身份证正面照不能为空', trigger: 'blur' }
        ],
        regtime: [
          { required: true, message: '注册时间不能为空', trigger: 'blur' }
        ],
        reverse_of_id_card: [
          { type: 'url', required: true, message: '身份证反面照地址不正确', trigger: 'blur' },
          { required: true, message: '身份证反面照不能为空', trigger: 'blur' }
        ]
      },
      dialogTableVisible: false,
      row_data: {
      },
      activeName: 'first',
      isDisable: false,
      isDisable1: true,
      hx: true,
      brand_name: false
    }
  },
  created() {
    this.getMerchantBrandInfo()
  },
  methods: {
    getMerchantBrandInfo() {
      info(store.getters.token).then(response => {
        console.log('response', response)
        this.isDisable = true
        if (response.data.status) {
          this.$message({ type: 'success', message: response.data.msg })
          this.row_data = response.data.data
        } else {
          this.$message({ type: 'warning', message: response.data.msg })
        }
        this.isDisable = false
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG、PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return (isJPG | isPNG) && isLt2M
    },
    upload_product_main_photo(file) { // 品牌图片
      const that = this
      const fileName = 'merchant_brand_brand_image' + file.file.uid + Math.random() + Math.random()
      client().put(fileName, file.file).then((res) => {
        this.$set(that.row_data, 'brand_image', res.url)
        that.$message.success('品牌图片上传成功！')
      }).catch((err) => {
        that.$message.error('品牌图片上传失败，原因：' + err)
      })
    },
    upload_business_license(file) { // 上传营业执照图片
      const that = this
      const fileName = 'merchant_business_license_image' + file.file.uid + Math.random() + Math.random()
      client().put(fileName, file.file).then((res) => {
        this.$set(that.row_data, 'business_license', res.url)
        that.$message.success('营业执照上传成功！')
      }).catch((err) => {
        that.$message.error('营业执照上传失败，原因：' + err)
      })
    },
    upload_id_card_zm(file) { // 上传身份证正面照图片
      const that = this
      const fileName = 'merchant_id_card_front' + file.file.uid + Math.random() + Math.random()
      client().put(fileName, file.file).then((res) => {
        this.$set(that.row_data, 'id_card_front', res.url)
        that.$message.success('身份证正面照上传成功！')
      }).catch((err) => {
        that.$message.error('身份证正面照上传失败，原因：' + err)
      })
    },
    upload_id_card_fm(file) { // 上传营业执照图片
      const that = this
      const fileName = 'merchant_reverse_of_id_card' + file.file.uid + Math.random() + Math.random()
      client().put(fileName, file.file).then((res) => {
        this.$set(that.row_data, 'reverse_of_id_card', res.url)
        that.$message.success('身份证反面照上传成功！')
      }).catch((err) => {
        that.$message.error('身份证反面照上传失败，原因：' + err)
      })
    },
    submitForm() {
      this.isDisable = true
      var check = 1
      this.$refs.row_data.validate(valid => {
        if (!valid) {
          check = 2
          this.isDisable = false
        }
      })
      if (check === 2) {
        return false
      }
      add(store.getters.token, this.row_data).then(res => {
        if (res.data.status) {
          this.$message.success(res.data.msg)
          this.getMerchantBrandInfo()
          this.close()
        } else {
          this.$message.error('添加失败！原因：' + res.data.msg)
          this.isDisable = false
          return false
        }
      })
    },
    close() {
      this.dialogTableVisible = false
      this.$refs['row_data'].resetFields()
      this.$emit('getLists')
      this.isDisable = false
    },
    handleClick(tag, event) {
      console.log('tag', tag)
      console.log('event', event)
    },
    handleDelImage(index) {
      this.imgList.splice(index, 1)
    }
  }
}
</script>

<style>
  /* 图片上传的样式 */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
  }

  /* 商品主图(product_main_photo)图片上传组件的尺寸 */
  .upload_product_main_photo .avatar-uploader-icon{
    font-size: 28px;
    min-width: 178px;
    height: 178px;
    line-height: 178px;
  }
  .upload_product_main_photo .avatar{
    min-width: 178px;
    height: 178px;
  }
  /* 商品附图(product_drawing)图片上传组件的尺寸 */
  .upload_product_drawing .avatar-uploader-icon{
    font-size: 28px;
    min-width: 178px;
    height: 178px;
    line-height: 178px;
  }
  .upload_product_drawing .avatar{
    min-width: 178px;
    height: 178px;
  }
  .image-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
    line-height: 178px;
  }
  .image-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .image-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
</style>
